<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="../../js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/login.css">
</head>
<body>
<div class="container">
    <div class="tabs">
        <div class="tab active" id="phoneTab">手机短信验证码登录</div>
        <div class="tab" id="accountTab">账号密码登录</div>
    </div>
    <div id="phoneLogin" class="form-group">
        <input type="tel" id="phone" placeholder="请输入手机号">
        <p id="err" class="err">验证码错误</p>
        <input type="text" id="yanzheng" placeholder="请输入验证码">
        <button id="yanzhengbtn">获取验证码</button>
        <button id="phoneloginbtn" class="login">登录</button>
    </div>
    <div id="accountLogin" class="form-group" style="display: none;">
        <input type="text" id="username" placeholder="请输入账号">
        <p id="accounterr" class="err">用户名或者密码错误</p>
        <input type="password" id="password" placeholder="请输入密码">
        <button id="accountloginbtn" class="login">登录</button>
    </div>
</div>

<script>
    const phoneTab = document.getElementById('phoneTab');
    const accountTab = document.getElementById('accountTab');
    const phoneLogin = document.getElementById('phoneLogin');
    const accountLogin = document.getElementById('accountLogin');
    const phoneloginbtn = document.getElementById("phoneloginbtn");
    const accountloginbtn = document.getElementById("accountloginbtn");
    const yanzhengbtn = document.getElementById("yanzhengbtn");
    const err = document.getElementById("err");
    const accounterr = document.getElementById("accounterr");
    phoneTab.addEventListener('click', function () {
        phoneTab.classList.add('active');
        accountTab.classList.remove('active');
        phoneLogin.style.display = 'block';
        accountLogin.style.display = 'none';
    });
    accountTab.addEventListener('click', function () {
        accountTab.classList.add('active');
        phoneTab.classList.remove('active');
        accountLogin.style.display = 'block';
        phoneLogin.style.display = 'none';
    });
    //手机号登录按钮点击事件
    phoneloginbtn.addEventListener("click", function () {
        let phone = $("#phone").val();
        let code = $("#yanzheng").val();
        mobileLogin(phone, code)
    })
    //用户名密码登录按钮点击事件
    accountloginbtn.addEventListener("click", function () {
        let username = $("#username").val();
        let password = $("#password").val();
        login(username, password)
    })
    //获取验证码按钮点击事件
    yanzhengbtn.addEventListener("click", function () {
        let phone = $("#phone").val();
        $.ajax({
            url: "http://39.98.107.120/login/sendCaptcha/" + phone,
            type: "get",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                if (data.code == "200") {
                    console.log(data.message);
                    err.style.display = 'None';
                } else {
                    err.style.display = 'block';
                    err.innerHTML = data.message;
                }
            }
        })
        yanzhengbtn.disabled = true; // 禁用按钮
        yanzhengbtn.style.backgroundColor = "#aaaaaa"; // 按钮变灰色
        let seconds = 60;
        yanzhengbtn.textContent = `${seconds} 秒后重新获取`;

        const countdown = setInterval(function () {
            seconds--;
            yanzhengbtn.textContent = `${seconds} 秒后重新获取`;
            if (seconds <= 0) {
                clearInterval(countdown);
                yanzhengbtn.textContent = '获取验证码';
                yanzhengbtn.disabled = false; // 启用按钮
                yanzhengbtn.style.backgroundColor = "#FF6633";
            }
        }, 1000);
    })

    //用户名密码登录
    function login(username, password) {
        let data = {"username": username, "password": password};
        $.ajax({
            url: "http://39.98.107.120/login/login",
            type: "post",
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                if (data.code == "200") {
                    sessionStorage.setItem("Authorization", data.data);
                    accounterr.style.display = 'None';
                    // 添加页面跳转
                    window.location.href = "../note/list.html";
                } else {
                    accounterr.style.display = 'block';
                    accounterr.innerHTML = data.message;
                }
            }
        })
    }

    //手机号验证码登录，如果没有自动注册
    function mobileLogin(phone, code) {
        let data = {"username": phone, "code": code};
        console.log(data);
        $.ajax({
            url: "http://39.98.107.120/login/mobileLogin",
            type: "post",
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                if (data.code == "200") {
                    console.log(data.message);
                    console.log(data.data);
                    sessionStorage.setItem("Authorization", data.data);
                    err.style.display = 'None';
                    // 添加页面跳转
                    window.location.href = "/page/html/note/list.html";
                } else {
                    err.style.display = 'block';
                    err.innerHTML = data.message;
                }
            }
        })
    }
</script>
</body>
</html>